<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <mata name="viewport" content="width=device-width,initial-scale=1.0">
    <title>首页</title>
    <style>
        .main{
            height: 800px;
            width: 1200px;
            margin: 0 auto;
            /* border: 1px solid #000; */
            }
        .title h1{
            width: 1200px;
            height: 100px;
            color: red;
            text-align: center;
            line-height: 100px;
            /* border: 1px solid #000; */
            }
        .op{
            width: 1200px;
            height: 50px;
            line-height: 50px;
            /* border: 1px solid #000; */
            position: relative;
           }
        .add{
            width: 100px;
            border: 1px solid #000;
            text-align: center;
            }
        .search{
            width: 200px;
            /* border: 1px solid #000; */
            text-align: center;  
            position: absolute;       
            top: 0;
            right: 5px;
        }
        .find{
            /* border: 1px solid #000; */
            text-align: center;  
            position: absolute;       
            top: 0;
            right:  5px;

        }
        .content{
            width: 1200px;
            height: 500px;
            border: 1px solid #000;
            margin-top: 10px;
        }
        .data{
            width: 1200px;
            border: 1px solid #000;
            text-align: center;
        }
        tr,th,td{
            border: 1px solid #000;
        }
        a{
            text-decoration: none;
        }
       
    </style>  
    <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(function(){
            $.post("/list",function(data){
                //展示数据
                SetContent(data)                 
            })
        });


        function search(){
            var key=$(".key").val()
            console.log("key:"+key)
            $.get("/search",{"key": key},function(data){
                SetContent(data)
            });
        }


        function SetContent(data){
            
            var html_str="";
                html_str+="<tr>"
                html_str+="     <th>编号</th>"
                html_str+="     <th>书名</th>"
                html_str+="     <th>价格(元)</th>"
                html_str+="     <th>描述</th>"
                html_str+="     <th>库存(本)</th>"
                html_str+="     <th>操作</th>"
                html_str+="</tr>"

                for(let i=0;i<data.length;i++){
                    // var obj=data[i];
                    let obj = data[i]
                    html_str+="<tr>"
                    html_str+="     <td>" + obj.bid + "</td>"
                    html_str+="     <td>" + obj.name + "</td>"
                    html_str+="     <td>" + obj.price + "</td>"
                    html_str+="     <td>" + obj.summary + "</td>"
                    html_str+="     <td>" + obj.quantity + "</td>"
                    html_str+="     <td><a href='/change/" + obj.bid + "'>修改</a> | <a href='/delete/"+obj.bid+"'>删除</a></td>"
                    html_str+="</tr>"                    
                }
                $(".data").html(html_str)
        }
    </script>

</head>
<body>
    <div class="main">
        <div class="title">
            <h1>图书管理系统</h1>
        </div>
        <div class="op">
            <div class="add">
                <a href="/add">添加书本</a>
            </div>
            <div class="search">
                <div><input type="text" name="key" id="key" class="key" placeholder="请输入搜索内容"></div>
                <div class="find"><input type="button" value="搜索" onclick="search()"></div>
            </div>
        </div>
        <div class="content">
        <table class="data">
        </table>
        </div>
    </div>
</body>
</html>